<template>
  <div style="margin-top:30px">
    <el-form ref="form" :rules="rules" :model="form" label-width="90px" disabled="disabled">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="报表名称" prop="name" style="margin-right:15px">
              <el-input v-model.trim="form.name"  @change="(value)=>{form.name = value.replace(/\s/g,'')}" placeholder="请输入报表名称" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="报表类型" prop="type" style="margin-right:15px">
              <el-select v-model="form.type" placeholder="请选择" clearable>
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="报表备注" prop="remark" style="margin-right:15px">
              <el-input type="textarea" :rows="3" v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="是否是默认" prop="isDefault" style="margin-right:15px">
              <el-switch v-model.number="form.isDefault" active-color="#13ce66" inactive-color="#DDDDDD" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="创建人" prop="name" style="margin-right:15px">
              <el-input v-model="form.createdBy" placeholder="" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="创建时间" prop="name" style="margin-right:15px">
              <el-input v-model="form.gmtCreated" placeholder="" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
    import Vue from 'vue'
    import 'xe-utils'
    import VXETable from 'vxe-table'
    import 'vxe-table/lib/index.css'
    import request from '@/utils/request'
    Vue.use(VXETable)
    export default {
        name: 'diyReportEdit',
        props: {
          reportFroms: {
            type: String,
            required: true
          }
        },
        data() {
            return {
                form: {
                    code: '',
                    branchCode: '',
                    name: '',
                    type: '',
                    isDefault: '',
                    remark: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入报表名称', trigger: 'blur' },
                        
                    ],
                     remark: [
                         { min: 1, max: 255, message: '长度在 1 到 255个字符', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请选择报表类型', trigger: 'blur' },
                    ]
                },
                // 报表类型
                typeOptions: [
                  { label: '库存明细', value: 0, color: 'gray' },
                  { label: '出库流水', value: 1, color: '#0000ff' },
                  { label: '入库流水', value: 2, color: '#0000ff' },
                ],
                // 是否默认
                isDefaultOptions: [
                    { label: '否', value: 0, color: 'gray' },
                    { label: '是', value: 1, color: '#0000ff' }
                ]
            }
        },
        created() {
            this.getInfo()
        },
        methods: {
          // 获取页面信息
          getInfo() {
            request({ url: `/wms/diyReport/${this.reportFroms}`, method: 'get' }).then(response => {
                this.form = response.data
            })
          }
        }
    }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin:15px 0 15px 0;
    width: 175px;
    float: right;
  }
  .el-select {
    width: 100%;
  }
</style>
